<template>
  <div class="icon-hover icon-size">
    <el-dropdown>
      <icon-add-text theme="outline" size="16" :fill="color" />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="item in sizeList"
            :key="item.value"
            :disabled="Size == item.value"
          >
            <span @click="handleSetSize(item.value)">{{ item.name }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import { useStore } from 'vuex';
  defineProps({
    color: {
      type: String,
      default: '#666',
    },
  });
  const sizeList = reactive([
    {
      name: 'Large',
      value: 'large',
    },
    {
      name: 'Default',
      value: 'default',
    },
    {
      name: 'Small',
      value: 'small',
    },
  ]);

  const Size = computed(() => {
    return store.getters['setting/size'];
  });

  const store = useStore();

  const handleSetSize = (size) => {
    store.dispatch('setting/setSize', size);
  };
</script>

<style lang="scss" scoped>
  .icon-size {
    padding: 20px 10px;
  }
</style>
